<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link th:replace="includes :: link">
    <script th:replace="includes :: script"></script>
    <style th:replace="includes :: style"></style>
    <!--    <link rel="stylesheet" href="/Users/wangdeying/Downloads/IntellJ项目/Administrator/demo/src/main/resources/static/layui/css/layui.css"  media="all">-->
    <link th:href="@{css/page.css}" rel="stylesheet" />
</head>
<body>
<div class="layui-anim layui-anim-fadein" style="padding:15px">
    <div class="layui-row">
        <!--<div th:text="${TestUtils}">文本</div>-->
        <!--<div th:text="${javaR_upd}">upd</div>-->
        <!--        <div th:text="${javaR_rem}">rem</div>-->
        <!--<div th:text="${javaR_pre}">pre</div>-->
        <!--        <div class="layui-card-header">图表</div>-->
        <!--<div class="layui-card-body">-->
        <!--            <form action="updateFile">-->
        <!--                <input id="select-file" name="file" type="file">-->
        <!--                <input type="submit">-->
        <!--            </form>-->
        <!--            <form action="water_level">-->
        <!--                <label>液位数据:</label>-->
        <!--                <input id="water-btn" type="button" value="运行！">-->
        <!--            </form>-->

        <div class="layui-card-body">
            <div class="layui-row">
                <form action="channel_test">
                    <div class="channel-query">
                        <div class="channel-choice">
                            <button type="button" style="cursor: auto;" class="layui-btn layui-bg-gray">计划换料通道</button>
<!--                            <label class="layui-form-label">计划换料通道</label>-->
                            <!--<button type="button" class="layui-btn layui-btn-primary channel-left"><i class="layui-icon layui-icon-left"></i></button>-->
                            <ul class="channel-test-ul">
                                <input name="channel" type="text" value="C05">
                                <input name="channel1" type="text" value="V12">
                                <input name="channel2" type="text" value="J17">
                                <input name="channel3" type="text" value="">
                                <input name="channel4" type="text" value="">
                                <input name="channel5" type="text" value="">
                                <input name="channel6" type="text" value="">
                                <input name="channel7" type="text" value="">
                                <input name="channel8" type="text" value="">
                            </ul>
                            <!--<button type="button" class="layui-btn layui-btn-primary channel-right"><i class="layui-icon layui-icon-right"></i></button>-->
                        </div>
                        <div class="channel-fpd">
                            <select id="unitCode">
                                <option value="TQNPC-1" selected>1号机组</option>
                                <option value="TQNPC-2">2号机组</option>
                            </select>
                            <select id="fpd">
                            </select>
                            <script>

                                var reactorList = {};
                                var unitCode = '';
                                var fpds = {};
                                var fpdMax = '';


                                $('#fpd').change(function () {
                                    var fpd = $(this).val();
                                    // var fpdIndex = fpds.getArrayIndex(fpd);
                                    // console.log(_.indexOf(fpds,fpd));
                                    var levels = _.chain(reactorList[unitCode]).find({fpd: fpd}).map(function (v, k) {
                                        return {k: k, v: v};
                                    }).filter(function (o) {
                                        return _.includes(o.k, 'zoneinitlvldev');
                                    }).map(function (o) {
                                        return {k: _.toNumber(_.replace(o.k, 'zoneinitlvldev', '')), v: o.v};
                                    }).sortBy(['k']).value();

                                    var levelsDelta = _.chain(reactorList[unitCode]).find({fpd: fpds[_.indexOf(fpds,fpd)-1]}).map(function (v, k) {
                                        return {k: k, v: v};
                                    }).filter(function (o) {
                                        return _.includes(o.k, 'zoneinitlvldev');
                                    }).map(function (o) {
                                        return {k: _.toNumber(_.replace(o.k, 'zoneinitlvldev', '')), v: o.v};
                                    }).sortBy(['k']).value();

                                    var delta = '';
                                    _.forEach(levels, function (o) {

                                        $('[name="wtin' + o.k + '-1"]').val(_.round(o.v,3));
                                        console.log(o);
                                        if (levelsDelta[o.k-1]) {
                                            delta = _.round(levelsDelta[o.k-1].v - o.v,3);
                                            // console.log(levelsDelta[o.k-1]+"---"+levelsDelta[o.k-1].v+" - "+o.v+" = "+delta);
                                            $('[name="wtin' + o.k + '-2"]').val(delta);
                                        }else {
                                            $('[name="wtin' + o.k + '-2"]').val('');
                                        }
                                    });//初始液位及液位偏差


                                });

                                $('#unitCode').change(function () {
                                    unitCode = $('#unitCode').val();
                                    $.ajax({
                                        url: 'getReactorList',
                                        data: {UNITCODE: unitCode},
                                    }).done(function (result) {
                                        if (!reactorList[unitCode]) reactorList[unitCode] = result;
                                        fpds = _.map(result, 'fpd');
                                        fpdMax = fpds[0];//取最大值
                                        var html = _.reduce(fpds, function (s1, s2) {
                                            return s1 + '<option value="' + s2 + '">' + s2 + '</option>'
                                        }, '');
                                        $('#fpd').html(html).trigger('change');
                                    });
                                }).trigger('change');
                            </script>
<!--                            <label>选用模型批次：</label>-->
                            <select id="taskIds">
                                <option value="">选用模型批次</option>
                                <option th:each="o:${list}">
                                    <span th:value="${o.taskId}" th:text="${o.taskId}"></span>
                                </option>
                            </select>
                        </div>
                        <div class="channel-predict">
                            <button type="button" class="layui-btn" id="channel-btn">预测</button>
                        </div>
                    </div>
                </form>
                <div class="channel-content">
                    <div class="channel-content-title">
                            <span class="column-wtin_avg">
                                <label>平均液位：</label>
                                <input name="wtin_avg" type="number" value=-0.096>
                            </span>
                        <span class="column-btn">
                                <button type="button" class="layui-btn layui-btn-primary btn-csyw">初始液位偏差</button>
                                <button type="button" class="layui-btn layui-btn-primary">液位偏差变化</button>
                            </span>
                    </div>
                    <div class="channel-content-yewei">
                        <div class="yewei">
                            <div class="yewei-left">
                                <div class="yewei-side-1">
                                    <p>
                                        <span>液位01：</span>
                                        <span><input name="wtin1-1" type="text" value=0.603 class="inp-csyw"></span>
                                        <span><input name="wtin1-2" type="text" value=-0.091></span>
                                    </p>
                                    <p>
                                        <span>液位08：</span>
                                        <span><input class="inp-csyw"  name="wtin8-1" type="text" value=0.545></span>
                                        <span><input name="wtin8-2" type="text" value=-0.1></span>
                                    </p>
                                </div>
                                <div  class="yewei-side-2">
                                    <p>
                                        <span>液位02：</span>
                                        <span><input class="inp-csyw"  name="wtin2-1" type="text" value=0.62></span>
                                        <span><input name="wtin2-2" type="text" value=-0.108></span>
                                    </p>
                                    <p>
                                        <span>液位09：</span>
                                        <span><input class="inp-csyw" name="wtin9-1" type="text" value=0.651></span>
                                        <span><input name="wtin9-2" type="text" value=-0.086></span>
                                    </p>
                                </div>
                            </div>
                            <div class="yewei-middle">
                                <div>
                                    <p>
                                        <span>液位03：</span>
                                        <span><input class="inp-csyw"  name="wtin3-1" type="text" value=0.524></span>
                                        <span><input name="wtin3-2" type="text" value=-0.059></span>
                                    </p>
                                    <p>
                                        <span>液位10：</span>
                                        <span><input class="inp-csyw" name="wtin10-1" type="text" value=0.626></span>
                                        <span><input name="wtin10-2" type="text" value=-0.106></span>
                                    </p>
                                </div>
                                <div class="yewei-middle-item">
                                    <p>
                                        <span>液位04：</span>
                                        <span><input class="inp-csyw"  name="wtin4-1" type="text" value=0.619></span>
                                        <span><input name="wtin4-2" type="text" value=-0.066></span>
                                    </p>
                                    <p>
                                        <span>液位11：</span>
                                        <span><input class="inp-csyw"  name="wtin11-1" type="text" value=0.583></span>
                                        <span><input  name="wtin11-2" type="text" value=-0.082></span>
                                    </p>
                                </div>
                                <div class="yewei-middle-item">
                                    <p>
                                        <span>液位05：</span>
                                        <span><input class="inp-csyw" name="wtin5-1" type="text" value=0.66></span>
                                        <span><input name="wtin5-2" type="text" value=-0.122></span>
                                    </p>
                                    <p>
                                        <span>液位12：</span>
                                        <span><input class="inp-csyw"  name="wtin12-1" type="text" value=0.644></span>
                                        <span><input name="wtin12-2" type="text" value=-0.141></span>
                                    </p>
                                </div>
                            </div>
                            <div class="yewei-right">
                                <div class="yewei-side-1">
                                    <p>
                                        <span>液位06：</span>
                                        <span><input name="wtin6-1" type="text" value=0.577 class="inp-csyw"></span>
                                        <span><input name="wtin6-2" type="text" value=-0.095></span>
                                    </p>
                                    <p>
                                        <span>液位13：</span>
                                        <span><input class="inp-csyw"  name="wtin13-1" type="text" value=0.592></span>
                                        <span><input  name="wtin13-2" type="text" value=-0.095></span>
                                    </p>
                                </div>
                                <div class="yewei-side-2">
                                    <p>
                                        <span>液位07：</span>
                                        <span><input class="inp-csyw" name="wtin7-1" type="text" value=0.615></span>
                                        <span><input name="wtin7-2" type="text" value="-0.108"></span>
                                    </p>
                                    <p>
                                        <span>液位14：</span>
                                        <span><input class="inp-csyw" name="wtin14-1" type="text" value=0.59></span>
                                        <span><input name="wtin14-2" type="text" value=-0.085></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="channel-chart">
                    <div class="title">功率分布球形图</div>
                    <div id="main" style="width: 100%; height: 800px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('.channel-close').click(function () {
        $(this).parent().remove();
    });

    /*<![CDATA[*/
    layui.use('table', function () {
        var table = layui.table;

        function fmt(name) {
            return Number(name.substring(4, name.indexOf('-'))) || 0;
        }

        var x = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
            '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'];
        var y = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M',
            'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'];

        var data = [];
        for (var i = 0; i < 100; i++) {
            // data.push([_.random(0, 21), _.random(0, 21), _.random(3000, 9000)])
            data.push([_.random(0, 21), _.random(0, 21),])

        }
        var option = {
            tooltip: {
                position: 'top'
            },
            animation: true,
            // grid: {borderColor:"#880000"},
            xAxis: [{
                // name: '数字坐标',
                type: 'category',
                data: x,
                position: "top",
                axisLine: {
                    lineStyle: {
                        color: []
                    }
                },
                splitArea: {
                    show: true
                }
            },
                {
                    // name: '数字坐标',
                    type: 'category',
                    data: x,
                    position: "bottom",
                    splitArea: {
                        show: true
                    }
                }
            ],
            yAxis: [{
                // name: '字母坐标',
                type: 'category',
                data: y,
                splitArea: {
                    show: true
                },
                inverse: true
            },
                {
                    // name: '字母坐标',
                    type: 'category',
                    data: y,
                    splitArea: {
                        show: true
                    },
                    inverse: true
                }],

            visualMap: {
                min: 3000,
                max: 7000,
                calculable: true,
                orient: 'vertical',
                right: '2%',
                bottom: '5%',
                inRange: {
                    color: ['lightskyblue','yellow', 'orangered']
                }

            },
            series: [{
                name: '功率分布',
                type: 'heatmap',

                data: data,
                label: {
                    normal: {
                        show: true,
                        color: "#20000a",
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },
                tooltip: {
                    formatter: function (params, ticket, callback) {
                        var html = y[params.value[1]] + x[params.value[0]] + ':<br>';
                        html += params.value[2];
                        return html;
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(156,156,156,0.5)',
                        color: 'rgba(134,208,255,0.76)',
                        borderColor: "rgba(25,25,25,0.89)",
                    }
                }
            }
            ]
        };

        var myChart = echarts.init($('#main')[0]);
        myChart.setOption(option);

        // var option = {
        //     id: 'power',
        //     elem: '#power',
        //     // url: 'test',
        //     cellMinWidth: 40,
        //     cols: [],
        //     page: false,
        //     response: {
        //         statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
        //     },
        //     parseData: function(data){
        //         // var fields = _.range(1,22);
        //         var cols = _.chain(data).sample().keys().map(function (k) {
        //             return {field: k, sort: false, align: 'center'}
        //         }).value();
        //         this.cols[0] = cols;
        //         return {
        //             "code": 200,
        //             // "msg": res.message,
        //             // "count": res.total,
        //             "data": data
        //         };
        //     }
        // };
        //
        // table.render(option);

        $('#channel-btn').on('click', function () {
            var list1 = _.map($('[name$="-1"]').sort(function (a, b) {
                return fmt(a.name) - fmt(b.name);
            }), 'value');
            var list2 = _.map($('[name$="-2"]').sort(function (a, b) {
                return fmt(a.name) - fmt(b.name);
            }), 'value');
            console.log(list2);
            var channels = _.join(_.filter(_.map($('[name^=channel]'), 'value'), function (o) {
                return o
            }), ',');
            console.log(channels);
            var yewei_avg = $('[name=wtin_avg]').val();
            // var fpd = $('[name=fpd2]').val();
            var fpd = $('#fpd').val().toString();
            // console.log(fpd);
            var taskID = $('#taskIds').val();
            var unitCode = $('#unitCode').val();

            $.ajax({
                url: 'currentData',
                complete:function(){},
                data: {fpd: fpd, unitcode: unitCode},
                success: function (result) {
                    // console.log(result);
                    $.ajax({
                        url: 'test',
                        type: 'post',
                        beforeSend:function(){},
                        data: {
                            fpd: result.fpd,
                            channels: channels,
                            yewei_avg: yewei_avg,
                            list1: _.join(list1, ','),
                            list2: _.join(list2, ','),

                            avgburnup: result.pmavgodburnup,
                            chp: result.pmchpdistribute,
                            taskID: taskID

                        },
                        // data: {channel: channel, yewei_avg: yewei_avg, list1: _.join(list1, ','), list2: _.join(list2, ',')},
                        success: function (result) {
                            data = _.reduce(result, function (r, v1, k1) {
                                return r.concat(_.map(v1, function (v2, k2) {
                                    v2 = Number(v2);
                                    return [k1, k2, v2 === 0 ? null : v2]
                                }));
                            }, []);
                            console.log(data);
                            option.series[0].data = data;
                            myChart.setOption(option);
                        }
                    });
                }
            });

            //

            //
            // table.reload('power', {
            //     url: 'test',
            //     where: {channel: channel, yewei_avg:yewei_avg,list1: _.join(list1, ','), list2: _.join(list2, ',')}
            // }, 'data');
        });
    });
    /*]]>*/
</script>

</body>
</html>